<template>
  <!-- 用户列表 -->
  <div class="UserBox">
    <!-- 头部面包屑 -->
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主题 -->
    <div class="main">
      <!-- 搜索 -->
      <div class="search">
        <div class="search-main">
          <el-input placeholder="请输入内容" v-model="input">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
        <el-button type="primary" @click="centerDialogVisible = true"
          >添加用户</el-button
        >
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="mobile" label="电话"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="role_name" label="角色"> </el-table-column>
          <el-table-column prop="tableData" label="状态">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @focus="fn"
            >
            </el-switch>
          </el-table-column>
          <el-table-column prop="tableData" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="omit(scope.row)">删除</el-button>
              <el-button type="warning" size="small" @click="share(scope.row)">分配角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[2, 10, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加用户弹出框 -->
    <el-dialog title="添加用户" :visible.sync="centerDialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="file('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑用户弹出框 -->
    <el-dialog title="修改用户信息" :visible.sync="centerDialogVisible1" width="30%">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="" >
          <el-input disabled v-model="ruleForm1.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="">
          <el-input v-model="ruleForm1.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="">
          <el-input v-model="ruleForm1.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="okedit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配用户弹出框 -->
    <el-dialog title="修改用户信息" :visible.sync="centerDialogVisible2" width="30%">
      <el-form
        :model="ruleForm2"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm xl"
      >
        <p>当前操作用户：{{ruleForm2.username}}</p>
        <p>当前操作用户角色：{{ruleForm2.role_name}}</p>
        <el-form-item >
          <el-select v-model="ruleForm2.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userlist,adduser,edituser,omituser,setState,search } from "@/api/user";
export default {
  name: "UserList",
  data() {
    return {
      input: "",
      tableData: [],
      value: false,
      total: 0,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      val:1,
      // 添加用户数据
      ruleForm: {
        username: "",
        password:"",
        email:"",
        mobile:""
      },
      // 编辑用户数据
      ruleForm1: {
        username: "",
        email:"",
        mobile:""
      },
      // 分配用户数据
      ruleForm2: {
        role_name: "",
        username:"",
        region: '',
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度11个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    userlist(this.val).then((res) => {
      this.total = res.data.data.total;
      this.tableData = res.data.data.users;
    });
    
  },
  methods: {
    // 改变分页数据的数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 改变分页的当前页数
    handleCurrentChange(val) {
      userlist(val).then((res) => {
        this.tableData = res.data.data.users;
      });
    },
    // 添加用户弹出框确认按钮
    file(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          adduser(this.ruleForm).then((res) => {
            if(res.status == 200){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              userlist(this.val).then((res) => {
                this.total = res.data.data.total;
                this.tableData = res.data.data.users;
              });
              this.centerDialogVisible = false
            }
          })
        } else {
          return false;
        }
      });
      
      
    },
    // 编辑用户按钮
    edit(val){
        this.ruleForm1 = val;
        this.centerDialogVisible1 = true
    },
    // 编辑完成
    okedit(){
        let obj = {
          id : this.ruleForm1.id,
          email : this.ruleForm1.email,
          mobile : this.ruleForm1.mobile,
        }
        edituser(obj).then((res) => {
          if(res.status == 200){
              this.$message({
                message: '编辑完成',
                type: 'success'
              });
              userlist(this.val).then((res) => {
                this.total = res.data.data.total;
                this.tableData = res.data.data.users;
              });
              this.centerDialogVisible1 = false
            }
        })
        this.centerDialogVisible1 = false
    },
    // 删除用户
    omit(val){
      omituser(val.id).then((res) => {
        if(res.status == 200){
          this.$message({
            message: '删除完成',
            type: 'success'
          });
          userlist(this.val).then((res) => {
            this.total = res.data.data.total;
            this.tableData = res.data.data.users;
          });
          this.centerDialogVisible1 = false
        }
      })
    },
    // 分配用户
    share(val){
      this.centerDialogVisible2 = true;
      this.ruleForm2.role_name = val.role_name;
      this.ruleForm2.username = val.username;
    },
    // 修改状态
    fn(){
      console.log(111)
      setState()
      this.value = true;
    },
    // 搜索用户
    search(){
      search(this.input).then((res) => {
        console.log(res);
        this.total = res.data.data.total;
        this.tableData = res.data.data.users;
      })
    },
    // ?query=123&pagenum=1&pagesize=10
  },
};
</script>

<style lang="scss">
.main {
  width: 98%;
  height: auto;
  margin-top: 15px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.search {
  height: 40px;
  margin-top: 15px;
  display: flex;
  .search-main {
    width: 30%;
    .el-input-group__append {
      padding: 0;
      width: 40px;
      button {
        width: 60px;
        padding: 0;
        height: 38px;
        margin: 0;
      }
    }
  }
  .el-button {
    height: 40px;
    margin-left: 10px;
  }
}
.table {
  margin: 15px 0;
}
.demo-ruleForm p{
  line-height: 40px;
}
.xl{
  .el-form-item__content{
    margin-left: -100px;
  }
}
</style>